<template>
  <div class="template">
   <div class="filter">
        <div class="filter-center">
            <Button
          style="margin-right: 10px"
          type="primary"
          icon="ios-add"
           @click="diyDom.showModal=true;diyData.roleId=''"
          >新增角色</Button
        >
        </div>

    </div>

    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
      </Table>
    </div>

    <add-role v-model="diyDom.showModal" :roleId='diyData.roleId' @on-success="getTableList()"></add-role>
  </div>
</template>

<script>
import {
  roleList
} from '@/api/system/role-permissions.js'
import addRole from './add-role.vue'
export default {
  name: 'role-permissions',
  components: {
    addRole
  },
  data () {
    return {
      query: {},
      search: {
        contractCode: '',
        custName: '',
        pageNo: 1,
        pageSize: 10,
        receiveTime: ''
      },
      diyDom: { showModal: false },
      diyData: {
        row: '',
        roleId: '',
        columns: [
          {
            title: '角色名称',
            key: 'roleName',
            width: 200
          },

          {
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        this.diyData.roleId = params.row.roleId
                        this.diyDom.showModal = true
                      }
                    }
                  },
                  '编辑'
                )])
            }
          }
        ]
      },
      apiData: {
        total: 0,
        tableList: []
      }
    }
  },
  computed: {
  },
  methods: {

    // 获取表格数据
    getTableList () {
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search }
      roleList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data.page
        this.apiData.tableList = list
        this.apiData.total = totalCount
      })
        .finally(() => this.$store.commit('setSpinShow', false))
    },
    // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    },

    // 清空
    clearFn () {
      this.search = {
        contractCode: '',
        custName: '',
        pageNo: 1,
        pageSize: 10,
        receiveTime: ''
      }
      this.getTableList()
    }

  },
   mounted () {
    this.getTableList()
  },
  activated () {
    this.getTableList();
  },
}
</script>

<style scoped lang="less">

</style>
